<template>
  <v-chart
    theme="dark"
    style="width: 590px; height: 280px"
    class="chart"
    :option="option"
    autoresize
  />
</template>

<script setup>
import { use } from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { PieChart } from "echarts/charts";
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
} from "echarts/components";
import VChart, { THEME_KEY } from "vue-echarts";
import { ref, defineComponent, defineProps } from "vue";

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
]);
// const props = defineProps({
//   themeColor: {
//     type: String || Object || Array,
//     default: 'dark'
//   }
// })

const option = ref({
  backgroundColor: "#05405c",
  title: {
    text: "",
    left: "center",
  },
  tooltip: {
    trigger: "item",
    formatter: "{b} : {c} ({d}%)",
  },

  legend: {
    top: "20%",
    left: "60%",
    type: "scroll",
    orient: "vertical",
    align: "left",
    icon: "circle",
    itemWidth: 5,
    selectedMode: false,
  },
  series: [
    {
      name: "设备数据",
      type: "pie",
      radius: ["55%", "70%"],
      center: ["50%", "50%"],
      data: [
        { value: 0, name: "一级", color: "red" },
        { value: 0, name: "二级" },
        { value: 0, name: "三级" },
        { value: 0, name: "四级" },
        { value: 0, name: "五级" },
        { value: 0, name: "非重大" },
      ],
      labelLine: {
        show: false,
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
  ],
});
var colors = {
  一级: "#C62825",
  二级: "#E49548",
  三级: "#C6C41D",
  四级: "#1415B5",
  非重大: "#648985",
  无重大: "#648985",
};
const setData = (data) => {
  console.log(data);
  let dataColor = [];
  data.map((item) => {
    dataColor.push(colors[item.name]);
    return item;
  });
  // console.log('data', dataPro);
  option.value = {
    backgroundColor: "#05405c",
    title: {
      text: "",
      left: "center",
    },
    tooltip: {
      trigger: "item",
      formatter: "{b} : {c} ({d}%)",
    },

    legend: {
      top: "20%",
      left: "70%",
      type: "scroll",
      orient: "vertical",
      align: "left",
      icon: "circle",
      selectedMode: false,
      fontSize: 20,
      formatter: (name) => {
        return (
          name +
          "\xa0\xa0\xa0\xa0" +
          data.find((item) => {
            return item.name == name;
          }).value
        );
      },
      // formatter: "{a} {b}",
    },
    series: [
      {
        name: "设备数据",
        type: "pie",
        radius: ["75%", "85%"],
        center: ["35%", "50%"],
        data,
        labelLine: {
          show: false,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
      // {
      //   name: "",
      //   type: "pie",
      //   radius: ["70%", "90%"],
      //   center: ["30%", "50%"],
      //   data: {
      //     name: "",
      //     value: 1,
      //     color: "transparent",
      //   },
      //   labelLine: {
      //     show: false,
      //   },
      //   emphasis: {
      //     itemStyle: {
      //       shadowBlur: 10,
      //       shadowOffsetX: 0,
      //       shadowColor: "rgba(0, 0, 0, 0.5)",
      //     },
      //   },
      // },
    ],
    color: dataColor,
  };
};
defineExpose({
  setData,
});
</script>

<style scoped>
.chart {
  /* width: 100%; */
  min-height: 280px !important;
  /* color: transparent; */
}
</style>
